<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <script src="./turf.min.js"></script>
    <script src="./kriging.js"></script>
    <script src="./rainbowvis.js"></script>
    <script src="./drawKriging.js"></script>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {});
        viewer.scene.debugShowFramesPerSecond = true;
        viewer.scene.globe.depthTestAgainstTerrain = true;
        viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
        var imageryProvider = new Cesium.SingleTileImageryProvider({
            "url": "./world_b.jpg",
        })
        viewer.imageryLayers.addImageryProvider(imageryProvider)


        var polygons = turf.randomPolygon(1, { bbox: [-120, 20, -80, 40] })
        var points = turf.randomPoint(100, { bbox: turf.bbox(polygons.features[0]) })
        points.features.forEach(element => {
            element.properties.temperature = parseInt(Math.random() * 300)
        });

        let krigingMap =  drawKriging(points, polygons.features[0].geometry.coordinates, {
            "propname": 'temperature',
            width: 0.1,
            alpha: 0.5
        });

        // 删除
        // viewer.scene.primitives.remove(krigingMap)

    </script>
</body>

</html>